<template>
	<view>
		<u-popup style="height: 35%;" v-model="show" mode="right" @close="closeModel" :mask="false" width="324rpx"
			:custom-style="{top: '128rpx'}">
			<view class="settings-content">
				<view class="set-item" v-for="(setItem, index) in settingList" :key="index"
					@click="showMsg(setItem.is_msg,setItem.msgType,setItem)">
					<view class="set-item-tltle">
						<u-icon :name="setItem.name" size="46" color="#ebd093" style="margin: 0 20rpx;"></u-icon>
						<text class="set-item-tltle-text">{{ setItem.title }}</text>
					</view>
					<view class="set-item-switch" v-if="typeof(setItem.checked) == 'boolean'">
						<u-switch v-model="setItem.checked" size="40"></u-switch>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show_message" mode="center" width="80%" border-radius="14" height="60%" top="40%">
			<view style="padding-top: 10%; padding-left: 5%; padding-right: 5%; padding-bottom: 5%; color: white;">
				<scroll-view scroll-y="true" style="height: 100%;" v-if="this.msgTypeNow == 'taihong'" >
					<view class="settings-msg" v-for="msg in msgContent" :key="msg.name">
						{{msg.title}}:   {{msg.content}}
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" style="height: 100%;" v-if="this.msgTypeNow == 'guize'" >
					{{msgContent}}
				</scroll-view>
			</view>
		</u-popup>
		<record :showModel="showRecord"></record>
		
	</view>
</template>

<script>
	
	import gameTable from "@/api/game"
	import record from '../index/record.vue'
	//音乐类型 背景音乐  音效
	const MUSIC_TYPE = {
		backgroundMusicState: 'backgroundMusicState',
		musicEffectSate: 'musicEffectSate'
	}
	export default {
		components: {
		    record
		},
		props: ['showSetting'],
		data() {
			return {
				msgTypeNow:'',
				settingList: [{
					name: 'volume',
					title: '音效',
					checked: uni.getStorageSync(MUSIC_TYPE.musicEffectSate) == 'off' ? false : true ,
					is_msg: false,
					msgType: 'closeMusic'
				}, {
					name: 'volume-fill',
					title: '背景音乐',
					checked: uni.getStorageSync(MUSIC_TYPE.backgroundMusicState) == 'off' ? false : true ,
					is_msg: false,
					msgType: 'closeBgMusic'
				}, {
					name: 'moments',
					title: '台红',
					is_msg: true,
					msgType: 'taihong'
				}, {
					name: 'order',
					title: '投注记录',
					is_msg: true,
					msgType: 'jilu'
				}, {
					name: 'calendar',
					title: '游戏规则',
					is_msg: true,
					msgType: 'guize'
				}],
				//选择的设置对象
				currentSettingItem: {},
				show: false,
				show_message: false,
				msgContent: [],
				showRecord:false
			}
		},
		watch: {
			'showSetting'(val) {
				this.show = val
			}
		},
		mounted() {
			
		},
		methods: {
			closeModel() {
				this.$parent.$parent.showSetting = false
			},
			getGameTable(id) {

				gameTable.gameTableInfo({
					id: id
				}).then((res) => {
					console.log('res:',res)
					if (res.data.code == 200) {
						
						this.msgContent = [{
							title: '限红庄闲美金',
							content: res.data.data.xian_hong_zhuang_xian_usd
						},{
							title: '限红庄闲人民币',
							content: res.data.data.xian_hong_zhuang_xian_cny,
						},{
							title: '限红和美金',
							content: res.data.data.xian_hong_he_usd,
						},{
							title: '限红和人民币',
							content: res.data.data.xian_hong_he_cny,
						},{
							title: '限红对子美金',
							content: res.data.data.xian_hong_duizi_usd,
						},{
							title: '限红对子人民币',
							content: res.data.data.xian_hong_duizi_cny,
						}]
					} else {
						this.$tip.alert(res.data.message);
					}
				})
			},
			showMsg(isMsg, msgType,setItem) {
				this.currentSettingItem = setItem
				this.msgTypeNow = msgType
				if (isMsg) {
					if (msgType == 'jilu') {
						this.showRecord = true
						return;
					}
					this.show_message = true
					if (msgType == 'taihong') {
						// 台红的业务逻辑
						let routes = getCurrentPages();
						let curParam = routes[routes.length - 1].options;
						this.getGameTable(curParam.id);
					}

					if (msgType == 'guize') {
						// 规则的业务逻辑
						this.msgContent='';
							this.msgContent +="【猜庄闲和】";
							this.msgContent +="庄闲和:'闲家','庄家'各先派两张牌,已'闲家'先发,如一轮未分出胜负需再按'牌例'发第二轮牌,最多每方3张牌,谁最接近9点即为胜方,而相同点数即为和局。";
							this.msgContent +="[和] 含本9倍,限额：10-1250";
							this.msgContent +="[闲] 含本2倍,限额：10-10000";
							this.msgContent +="[免佣庄] 含本2倍,限额:10-10000";
							this.msgContent +="[幸运6] 含本13倍,限额：10-833.33";
							this.msgContent +="格式：庄or闲or和+金额,Z|X|H+金额";
							this.msgContent +="例：庄100,闲200,和500,Z100,X100,H100";
							this.msgContent +="【猜庄对闲对】";
							this.msgContent +="庄/闲对子：指根据当局所开只牌的庄/闲前两张牌的牌面(数字或字母,不计花式)为依据,牌面相同为对子,游戏中,庄家前两张牌的牌面相同,为庄对子,即押注'庄对'者为胜,闲家前两张牌牌面相同,为闲对子,即押注'闲对'者为胜";
							this.msgContent +="[闲对] 含本12倍,限额：10-909.09";
							this.msgContent +="[庄对] 含本12倍,限额：10-909.09";
							this.msgContent +="格式：庄对or闲对+金额,ZD|XD+金额";
							this.msgContent +="例：庄对100,闲对200,ZD100,XD100";
					}
				} else {
					
				}
				if (msgType == 'closeBgMusic') {
					// 关闭背景音乐
					this.setBackgroundMusic(MUSIC_TYPE.backgroundMusicState)
				}
				if (msgType == 'closeMusic') {
					// 关闭音效
					this.setBackgroundMusic(MUSIC_TYPE.musicEffectSate)
				}

			},
			/**
			 * 开关背景音乐
			 * @param {key} 本地存储key 
			 * */
			setBackgroundMusic(key) {
				if(this.currentSettingItem.checked) {
					uni.setStorageSync(key, 'on')
					if(key == MUSIC_TYPE.backgroundMusicState) {
						this.$innerAudioContext.src = '/static/assets/audio/bg001.mp3'
						this.$innerAudioContext.loop = true
						this.$innerAudioContext.play()
					}
				}else{
					uni.setStorageSync(key, 'off')
					key == MUSIC_TYPE.backgroundMusicState ? this.$innerAudioContext.pause() : '';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-mode-center-box {
		border: 2rpx solid #E7CA90;
		background-color: rgba(0, 0, 0, .5);
	}

	/deep/ .u-drawer-content {
		border-radius: 20rpx 0 0 20rpx;
		border: 2rpx solid #E7CA90;
		background-color: rgba(0, 0, 0, .8);
	}
	.settings-msg{
		border-bottom: 1px dashed #E7CA90;
		// border-radius: 10rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		margin-bottom: 20rpx;
	}

	.settings-content {
		.set-item {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 2rpx solid #E7CA90;

			.set-item-tltle {
				display: flex;
				align-items: center;

				.set-item-tltle-text {
					color: #FFFFFF;
				}
			}
		}
	}
</style>
